<template>
	<view class="bg-light" style="min-height: 100vh;">
		<block v-for="(item,index) in list" :key="index">
			<view v-if="!item.isedit" class="bg-white">
				<video style="height: 350rpx;width: 100%;" :src="item.url" controls></video>
				<form-item label="标题">
					<text class="font">{{item.title}}</text>
				</form-item>
				<view class="flex" style="height: 100rpx;">
					<view class="flex-1 font flex align-center justify-center" hover-class="bg-light" @click="openEdit(item)">修改</view>
					<view class="flex-1 font flex align-center justify-center" hover-class="bg-light" @click="deleteItem(index)">删除</view>
				</view>
			</view>
			<view v-else class="bg-white">
				<view style="height: 350rpx;" class="bg-light position-relative" hover-class="bg-hover-light">
					<video v-if="item.url" style="height: 350rpx;width: 100%;" :src="item.url" controls></video>
					<view v-if="!item.url" class="position-absolute left-0 right-0 top-0 bottom-0 flex flex-column align-center justify-center"
					 style="background-color: rgba(255,255,255,0.2);" @click="upload(item)">
						<text class="iconfont iconjia" style="font-size: 50rpx;"></text>
						<text class="font text-muted">点击添加视频</text>
					</view>
				</view>
				<view v-if="item.url" class="flex align-center justify-center font border-bottom border-top" hover-class="bg-light"
				 style="height: 100rpx;" @click="upload(item)">
					点击切换视频
				</view>
				<form-item label="标题">
					<input type="text" v-model="item.title" placeholder="请填写视频标题" placeholder-class="text-light-muted" class="w-100 pr-5" />
				</form-item>
				<form-item label="描述">
					<textarea v-model="item.desc" placeholder="请填写视频描述" style="width: 550rpx;" class="py-3" />
					</form-item>
				<view class="flex" style="height: 100rpx;">
					<view class="flex-1 font flex align-center justify-center bg-main text-white" hover-class="bg-main-hover" @click="submit(item)">完成</view>
					<view class="flex-1 font flex align-center justify-center" hover-class="bg-light" @click="deleteItem(index)">删除</view>
				</view>
			</view>
			<view class="f-divider"></view>
		</block>
		<view v-if="showButton" class="flex align-center justify-center bg-main text-white font" style="height: 100rpx;" hover-class="bg-main-hover" @click="add">
			+ 添加新章节
		</view>
	</view>
</template>

<script>
	import formItem from '@/components/common/form-item.vue';
	// #ifndef H5
	import VodUploader from '@/common/vod-wx-sdk-v2.js';
	// #endif
	export default {
		components: {
			formItem
		},
		data() {
			return {
				list:[],
				id:0
			}
		},
		computed: {
			showButton() {
				let arr = this.list.filter(item=>{
					return item.isedit
				})
				return arr.length === 0
			}
		},
		onLoad(e) {
			if(!e.id){
				uni.showToast({
					title: '请选择视频',
					icon: 'none'
				});
				return setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1000)
			}
			this.id=e.id
			this.getData()
		},
		methods: {
			getData(){
				this.$H.get('/video_detail/'+this.id,{token:true}).then(res=>{
					this.list = res.map(item=>{
						item.isedit=false
						return item
					})
				})
			},
			// 完成
			submit(item){
				if(!item.url){
					return uni.showToast({
						title: '视频不能为空',
						icon: 'none'
					});
				}
				if(!item.title){
					return uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					});
				}
				let url=item.id?'/video_detail/'+item.id:'/video_detail'
				let msg=item.id?'修改成功':'添加成功'
				this.$H.post(url,{
					url:item.url,
					desc:item.desc,
					video_id:this.id,
					title:item.title
				}).then(res=>{
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					item.isedit = false
					this.getData()
				})
				
			},
			// 删除
			deleteItem(index){
				uni.showModal({
					content: '是否要删除该视频？',
					success: (res)=>{
						if (res.confirm) {
							if(this.list[index].id){
								this.$H.post('/video_detail/destroy',{id:this.list[index].id},{token:true}).then(result=>{
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									this.getData()
								})
							}else{
								this.list.splice(index,1)
							}
							
						}
					}
				});
			},
			// 添加章节
			add(){
				this.list.push({
					video:"",
					title:"",
					desc:"",
					isedit:true
				})
			},
			// 上传视频
			upload(item){
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res)=> {

						// #ifdef H5
						let getSignature = (callback) => {
							return this.$H.post('/vod/sign',{},{
								token:true
							}).then(res=>{
								return res
							})
						}
						// #endif
						
						// #ifndef H5
						let getSignature = (callback) => {
							this.$H.post('/vod/sign',{},{
								token:true
							}).then(res=>{
								callback(res);
							})
						}
						// #endif
						
						// 生成唯一名称
						let mediaName = this.genID(12)
						uni.showLoading({
							title: '上传中...',
							mask: false
						});
						
						// #ifdef H5
						const tcVod = new TcVod.default({
						  getSignature: getSignature
						})
						const uploader = tcVod.upload({
						  mediaFile: res.tempFile,
						})
						uploader.on('media_progress',(info)=> {
							item.percent=info.percent
						  console.log(info.percent) // 进度
						})
						uploader.done().then((doneResult)=>{
							// 上传后的视频链接
							item.percent=100
							item.url = doneResult.video.url
							uni.hideLoading()
						}).catch((err)=>{
							uni.hideLoading()
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						})
						// #endif
						
						// #ifndef H5
						VodUploader.start({
							mediaFile: res, 
							getSignature: getSignature,
							mediaName: mediaName,
							success: (result)=>{
								console.log('success');
								console.log(result);
							},
							error:(result)=> {
								console.log(result);
								uni.showModal({
									title: '上传失败',
									content: JSON.stringify(result),
									showCancel: false
								});
							},
							progress:(result)=> {
								console.log('progress');
								console.log(result);
								item.percent=result
							},
							finish: (result)=>{
								// 上传后视频链接
								item.percent=100
								item.url = result.videoUrl
								uni.hideLoading()
							}
						});
						// #endif
					}
				});
			},
			// 开启编辑状态
			openEdit(item){
				item.isedit = true
			},
			// 生成唯一ID
			genID(length){
				return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
			}
		}
	}
</script>

<style>

</style>
